<template>
	<view class="contents">

		<nav-bar :title="book && book.name ? book.name : '目录'"></nav-bar>

		<u-loading-page :loading="bookState==-2"></u-loading-page>

		<u-empty v-if="bookState===-1" mode="wifi"></u-empty>

		<view class="bcard">
			<!-- <book-card v-bind="book" :tags="[book.state,book.classify,book.id]" type="card"
			 v-if="book && book.name">
			</book-card> -->

			<!-- #ifdef APP-PLUS || H5-->
			<book-card v-bind="book" :tags="[book.state,book.classify,book.id]" type="card" v-if="book && book.name"
				:card-id="book.id">
			</book-card>
			<!-- #endif -->

			<!-- #ifdef MP -->
			<book-card :tags="[book.state,book.classify,book.id]" type="card" v-if="book && book.name"
				:card-id="book.id" :name="book.name" :author="book.author" :img="book.img" :sourceSite="book.sourceSite"
				:synopsis="book.synopsis">
			</book-card>
			<!-- #endif -->
		</view>

		<view class="card" v-if="book && book.name">
			<icon-list style="width: 100%;" @select="select" :list="listIcon"></icon-list>
		</view>

		<!-- 最新五章 -->
		<view class="card" v-if="book && book.name">
			<view class="card-title">
				<uni-title :title="'最新章节'" type="h3"></uni-title>

				<view class="card-more" v-if="chapterCount>0" @click="toCatalog"><text
						style="color: #007AFF;">更多({{chapterCount}})</text>
				</view>
			</view>

			<uni-list v-if="chapterList && chapterList.length > 0" style="width:100%;">
				<block v-for="($chapter,$index) in chapterList">
					<uni-list-item :title="$chapter.title"
						:to="`/pages/chapter/chapter?webId=${web.id}&contentsId=${contentsId}&url=${$chapter.url}&bookId=${bookId}`">
					</uni-list-item>
				</block>
			</uni-list>

			<u-empty v-if="contentsState===0&&chapterList ===null" mode="data" text="暂无来源"></u-empty>

			<u-empty v-if="contentsState===-1" mode="wifi"></u-empty>

			<u-loading-icon :show="contentsState===-2"></u-loading-icon>
		</view>


		<!-- 评论 -->
		<view class="card" v-if="book && book.name">
			<view class="card-title">
				<uni-title title="评论" type="h3" style="margin-bottom: 10px;"></uni-title>

				<text v-if="commentCount>0" style="color: #007AFF;" @click="toComment">更多({{commentCount}})</text>
			</view>

			<view class="rate-bar">
				<text style="color: #007AFF;">轻点评分</text>
				<uni-rate :value="4.6" @change="" :is-fill="false" :allowHalf="true" color="#ffca3e" />
			</view>

			<u-empty v-if="commentState===-1" mode="wifi">
			</u-empty>

			<u-loading-icon :show="commentState===-2"></u-loading-icon>

			<u-empty v-if="commentState==0&&commentCount==0" mode="data" text="暂无评论">
			</u-empty>

			<block v-for="(commentVo,$index) in commentList" v-if="commentState==0&&commentCount>0">

				<view style="flex-direction : row; display: flex; width: 100%;">
					<!-- 用户头像-->
					<view style="width:50px; min-width:50px; flex-shrink : 0;">
						<image :src="commentVo.user.img"
							style="width : 35px; height : 35px; border-radius : 20px 20px;">
						</image>
					</view>

					<view style="flex : 1; flex-direction : column;">

						<!-- 用户信息-->
						<view style="flex-direction : column; height : 40px; margin-bottom : 7px;
						                                                        flex-shrink : 0;display: flex;">
							<text style="flex : 1; color : hotpink;">{{ commentVo.user.nickname }}</text>
							<text
								style="flex : 1; color : darkgray;font-size: 14px;">{{formatTime(commentVo.comment.time)}}</text>
						</view>

						<!-- 评论内容-->
						<view style="margin-bottom : 7px;">
							<ex-text :title="commentVo.comment.content" :size="16"></ex-text>
						</view>
					</view>
				</view>

			</block>
		</view>



		<!-- 作者其他作品 -->
		<view class="card" v-if="elseState!==-3 && book && book.name">
			<uni-title :title="'作者其他作品'" type="h3" style="margin-bottom: 10px;"></uni-title>

			<block v-if="elseBooks&&elseBooks.length < 4">
				<block v-for="book in elseBooks">
					<!-- <book-card v-bind="book" :tags="[book.state,book.classify,book.id]" type="list"
						style="margin: 10px 0;" :isLink="true" :link="'/pages/contents/contents?id='+book.id">
					</book-card> -->

					<!-- #ifdef APP-PLUS || H5-->
					<book-card v-bind="book" :tags="[book.state,book.classify,book.id]" :card-id="book.id" type="list"
						style="margin: 10px 0;" :isLink="true" :link="'/pages/contents/contents?id='+book.id">
					</book-card>
					<!-- #endif -->

					<!-- #ifdef MP -->
					<book-card :tags="[book.state,book.classify,book.id]" :card-id="book.id" :name="book.name"
						:author="book.author" :img="book.img" :sourceSite="book.sourceSite" :synopsis="book.synopsis"
						type="list" style="margin: 10px 0;" :isLink="true"
						:link="'/pages/contents/contents?id='+book.id">
					</book-card>
					<!-- #endif -->

				</block>
			</block>

			<block v-if="elseBooks&&elseBooks.length >= 4">
				<scroll-list :list="elseBooks" @scrollClick="scrollClick"></scroll-list>
			</block>

			<u-empty v-if="elseState===-1" mode="wifi">
			</u-empty>

			<u-loading-icon :show="elseState===-2"></u-loading-icon>

			<u-empty v-if="elseState===0 && (!elseBooks||elseBooks.length===0)" mode="data" text="暂未收录">
			</u-empty>

		</view>

		<view class="used" :style="{height:commentHeight + 30 + 'px'}"></view>

		<view class="bottom" :style="{height:commentHeight + 30 + 'px'}">
			<view class="comment-bar" :style="{height:commentHeight + 20 + 'px'}">
				<u--textarea placeholder="来发一条友善的评论吧~" fixed :height="commentHeight" @linechange="lineChange"
					maxlength="-1" v-model="commentText" style="border-radius: 20px; width: 75%;" ref="textarea">
				</u--textarea>
				<u-button type="primary" text="发送" hairline shape="circle" :style="{width:'20%',marginLeft:'10px'}"
					@click="sendComment">
				</u-button>
			</view>
			<!-- <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="leftClick"
				@buttonClick="toCatalog" class="bottom-bar" /> -->
		</view>

	</view>
</template>

<script>
	import utils from '@/static/js/utils.js'
	import logo from '@/static/logo.png'
	export default {
		data() {
			return {
				// 不渲染
				contentsList: null,
				// 该页面只展示一个来源的最新五章
				// 最新五章
				chapterList: null,
				// 来源
				web: null,
				// 总章节数
				chapterCount: -1,
				contentsId: -1,
				// 初始状态
				contentsState: -3,

				// 该页面只展示评论的最新三条
				// 最新三条
				// commentList: null,

				// 总评论数
				commentCount: -1,
				commentState: -3,
				// 所有评论
				allComments: [],


				bookId: 0,

				book: null,
				bookState: -3,

				bookInfo: null,
				elseBooks: null,
				elseState: -3,

				// 书额外信息
				record: null,

				// 评论
				commentText: "",
				commentHeight: 40,
			}
		},
		computed: {
			commentList() {
				return this.allComments.slice(0, this.commentCount > 3 ? 3 : this.commentCount)
			},

			listIcon() {
				let list = [{
					selectedIcon: "hand-up-filled",
					icon: "hand-up",
					text: "点赞",
					selectedColor: "#ff3333",
					isSelected: false,
					id: "likes"
				}, {
					selectedIcon: "star-filled",
					icon: "star",
					text: "收藏",
					selectedColor: "#ff3333",
					isSelected: false,
					id: "collection"
				}, {
					selectedIcon: "fire-filled",
					icon: "fire",
					text: "热度",
					selectedColor: "#ff3333",
					isSelected: true,
					id: "click"
				}, {
					selectedIcon: "redo-filled",
					icon: "redo",
					text: "转发",
					selectedColor: "#ff3333",
					isSelected: false,
					id: "forward"
				}]
				if (this.record) {
					list[0].isSelected = this.record.isLikes
					list[1].isSelected = this.record.isCollection
					// list[2].isSelected = true
					list[3].isSelected = this.record.isForward
				}
				if (this.bookInfo) {
					list[0].text = this.formatNumber(this.bookInfo.likesNum)
					list[1].text = this.formatNumber(this.bookInfo.collectionNum)
					list[2].text = this.formatNumber(this.bookInfo.clickNum)
					list[3].text = this.formatNumber(this.bookInfo.forwardNum)
				}

				return list
			}
		},

		methods: {
			
			toComment() {
				uni.navigateTo({
					url: `/pages/comment/comment?bookId=${this.bookId}&title=${this.book.name}`
				})
			},
			sendComment() {

				console.log("comment", this.commentText)

				if (!this.commentText || this.commentText === "") {
					return
				}

				utils.http.get("/comment/publish", {
					content: this.commentText,
					bookId: this.bookId
				}).then(res => {
					if (res.status === 200) {
						// 发送成功
						this.commentText = ""
						uni.showToast({
							icon: "none",
							title: "成功"
						})
						this.commentLoad()
					} else {
						uni.showToast({
							icon: "error",
							title: "评论失败"
						})
					}
				}).finally(e => {

				})
			},
			lineChange(e) {
				console.log("comment", e)
				if (e.detail.lineCount <= 2)
					this.commentHeight = e.detail.height
			},
			select(id) {

				if (id == "likes") {
					// 点赞
					this.likes(this.record.isLikes)
				} else if (id == "collection") {
					// 收藏
					this.collection(this.record.isCollection)
				} else if (id == "click") {
					// 热度
				} else if (id == "forward") {
					//转发
					// 使用系统分享发送分享消息
					plus.share.sendWithSystem({
						type: 'text',
						content: this.book.name,
					}, e => {
						this.record.isForward = true
						this.bookInfo.forwardNum = this.bookInfo.forwardNum + 1
						uni.showToast({
							title: "分享成功",
							icon: "none"
						})

					}, e => {
						console.log('分享失败');
					})
				}
			},

			collection(state) {
				if (state) {
					// 取消点赞
					utils.http.get(
						"/shelf/delete?bookId=" + this.bookId
					).then(res => {
						if (res.status == 200) {
							this.record.isCollection = false
							this.bookInfo.collectionNum = this.bookInfo.likesNum - 1
							uni.showToast({
								title: "取消收藏",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "取消失败",
								icon: "none"
							});
						}
					});
				} else {
					// 点赞
					utils.http.get(
						"/shelf/add?bookId=" + this.bookId
					).then(res => {
						if (res.status == 200) {
							this.record.isCollection = true
							this.bookInfo.collectionNum = this.bookInfo.likesNum + 1
							uni.showToast({
								title: "收藏成功",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "收藏失败",
								icon: "none"
							});
						}
					});
				}
			},

			likes(state) {
				if (state) {
					// 取消点赞
					utils.http.get(
						"/likes/deleteProfile?bookId=" + this.bookId
					).then(res => {
						if (res.status == 200) {
							this.record.isLikes = false
							this.bookInfo.likesNum = this.bookInfo.likesNum - 1
							uni.showToast({
								title: "取消点赞",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "取消失败",
								icon: "none"
							});
						}
					});
				} else {
					// 点赞
					utils.http.get(
						"/likes/addProfile?bookId=" + this.bookId
					).then(res => {
						if (res.status == 200) {
							this.record.isLikes = true
							this.bookInfo.likesNum = this.bookInfo.likesNum + 1
							uni.showToast({
								title: "点赞成功",
								icon: "none"
							});

						} else {
							uni.showToast({
								title: "点赞失败",
								icon: "none"
							});
						}
					});
				}
			},

			toCatalog() {
				uni.navigateTo({
					url: "/pages/catalog/catalog?bookId=" + this.bookId
				})
			},

			scrollClick(id) {
				uni.navigateTo({
					url: '/pages/contents/contents?id=' + id
				})
			},

			toLeft() {
				uni.navigateBack()
			},
			toHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			formatTime(time) {
				return utils.formatTime(time)
			},

			commentLoad() {
				// 加载状态
				this.commentState = -2

				utils.http.get(
					"/comment/list", {
						bookId: this.bookId,
						page: 1,
						pageSize: 3
					}
				).then(res => {
					// 成功返回
					this.commentState = 0
					if (res.status === 200) {
						this.commentCount = res.data.count
						let comments = []
						res.data.list.forEach(vo => {
							vo.user.img = utils.http.baseUrl + vo.user.img
							comments.push(vo)
						})
						this.allComments = comments
					}

				}).catch(error => {
					// 网络异常
					this.commentState = -1
				})
			},
			contentLoad() {
				this.contentsState = -2
				utils.http.get(`/contents/vo/${this.bookId}`).then(res => {
					this.contentsState = 0
					if (res.status == 200) {
						let list = res.data.list
						this.contentsList = res.data.list
						if (list && list.length > 0) {
							for (let i = 0; i < list.length; i++) {
								let vo = list[i]
								let content = vo.contents.content
								if (content) {
									if (typeof content == 'string') {
										content = JSON.parse(content)
									}

									if (content.length > 0) {
										// 设置vo
										vo.contents.chapterList = content

										this.chapterCount = content.length

										this.web = vo.web
										this.contentsId = vo.contents.id

										this.chapterList = content.slice((content.length - 5) > 0 ? content
											.length -
											5 : 0, content.length).reverse()
										break
									} else {
										vo.contents.chapterList = null
									}
								}
							}
						}
					}
				}).catch(err => {
					this.contentsState = -1
				})
			},
			bookLoad() {
				this.bookState = -2
				utils.http.get(`/book/${this.bookId}`).then(res => {
					this.bookState = 0
					if (res.status == 200) {
						this.book = res.data
						this.authorElse()
					}
				}).catch(err => {
					this.bookState = -1
				})
			},
			authorElse() {
				this.elseState = -2
				utils.http.get(
					"/book/author/" + this.book.author
				).then(res => {
					this.elseState = 0
					if (res.status === 200) {
						let all = res.data
						let elseBooks = []
						all.forEach(book => {
							if (book.id != this.bookId) {
								elseBooks.push(book)
							}
						})
						this.elseBooks = elseBooks
					}
				}).catch(e => {
					this.elseState = -1
				})
			},
			bookInfoLoad() {
				// 获取书的信息
				utils.http.get(
					"/bookInfo/" + this.bookId
				).then(res => {
					if (res.status == 200) {
						this.bookInfo = res.data
					}
				});
			},

			bookProfile() {
				// 获取个人对书的操作
				utils.http.get(
					"/record/book/" + this.bookId
				).then(res => {
					console.log("bookProfile", res)
					if (res.status == 200) {
						this.record = res.data
					}
				});
			},

			formatNumber(num) {
				return utils.formatNumber(num)
			}
		},

		onLoad(option) {
			this.bookId = option.id
			this.bookLoad()
			this.bookInfoLoad()
			this.contentLoad()
			this.commentLoad()
			this.bookProfile()
		}
	}
</script>

<style>
	.contents {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* background-color: #fafafa; */
	}



	.bcard {
		/* margin: 5px 10px; */
		/* padding: 10px 0px; */
		background-color: white;
		width: 90%;
		margin: 10px 0;
	}

	.contents .card {
		/* margin: 5px 10px; */
		padding: 10px 0px;
		background-color: white;
		/* border-radius: 10px; */
		display: flex;
		width: 90%;
		flex-direction: column;
		justify-content: center;
	}

	.card-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.rate-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 10px;
		background-color: #F0F0F0;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.card-more {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
	}

	.img {
		width: 30px;
		height: 30px;
		border-radius: 50% 50%;
		flex-shrink: 0;
		margin-right: 10px;
	}


	.used {
		width: 100%;
		background-color: white;
	}

	.bottom {
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: white;
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-top: #C0C0C0 solid 0.5px;
		z-index: 999;
	}

	.comment-bar {
		width: 95%;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
	}

	.bottom-bar {
		width: 100%;
	}

	.popupContents {
		margin-top: 40px;
		height: 550px;
	}
</style>
